.ball {
    border: 2px solid transparent;
    border-radius: 50%;
    position: fixed;
    top: 50%;
    left: 50%;
    animation-name: roll;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.ball-1 {
    width: 140px;
    height: 140px;
    border-top-color: #f00;
    margin: -70px 0 0 -70px;
    animation-duration: 2s;
}

.ball-2 {
    width: 120px;
    height: 120px;
    border-top-color: #650;
    margin: -60px 0 0 -60px;
    animation-duration: .5s;
}

.ball-3 {
    width: 100px;
    height: 100px;
    border-top-color: #360;
    margin: -50px 0 0 -50px;
    animation-duration: .8s;
}

.ball-4 {
    width: 80px;
    height: 80px;
    border-top-color: #036;
    margin: -40px 0 0 -40px;
    animation-duration: 1s;
}

.ball-5 {
    width: 60px;
    height: 60px;
    border-top-color: #603;
    margin: -30px 0 0 -30px;
    animation-duration: .4s;
}

@keyframes roll {
    0% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(360deg)
    }
}